import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Stepper, Checkbox, SubmitBar } from 'react-vant'
const Home = () => {
  const selector = useSelector(state => state.car.cartList);
  const dispatch = useDispatch()
  const allCheck = selector.every(v => v.state)
  const allPrice = selector.filter(v => v.state).reduce((p, n) => {
    return p + n.price * n.count
  }, 0)
  return (
    <div className='home'>
      {
        selector.map((v, i) => {
          return <dl key={i}>
            <dd>
              <Checkbox checked={v.state} onChange={() => dispatch({ type: 'oneCheck', payload: v })}></Checkbox>
            </dd>
            <dt>
              <img src={v.image} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
              <p>{v.price}</p>
              <Stepper value={v.count} onPlus={() => dispatch({ type: 'add', payload: v })} onMinus={() => dispatch({ type: 'sub', payload: v })}></Stepper>
            </dd>
          </dl>

        })
      }
      <SubmitBar
        price={allPrice * 100}
        buttonText="提交订单"
        tip={
          <>
            你的收货地址不支持同城送,
            <span style={{ color: '#1989fa' }}>修改地址</span>
          </>
        }
      >
        <Checkbox checked={allCheck} onChange={() => dispatch({ type: 'allCheck', payload: !allCheck })}>全选</Checkbox>
      </SubmitBar>¸
    </div>
  )
}

export default Home